<template>
	<view>
		<Navbar :isReturn="true"></Navbar>
		<view class="u-m-20">
			<view class="u-card-box">
				<view class="pay_input">
					<text class="u-color-red u-font-30">￥</text>
					<text class="u-color-red font_size48 u-font-bold">{{ ticketInfo.price }}</text>
					<text class="u-font-24 u-p-l-20">{{ ticketInfo.name }}</text>
				</view>
				<view class="u-m-t-30">
					<text class="tag_yellow u-font-22">退款说明</text>
				</view>
				<view class="u-font-24 font6769 u-m-t-32">
					1、活动开始前48小时不可取消。
				</view>
				<view class="u-font-24 font6769 u-m-t-20">
					2、若报名审核不通过，报名费用将原路返回。
				</view>
				<view class="u-m-t-40">
					<text class="tag_yellow u-font-22 ">注意</text>
				</view>
				<view class="u-font-24 font6769 u-m-t-32">
					活动名额有限，请尽快付款。
				</view>
			</view>
		</view>
		<Bottom :btnText="'立即支付'" @confirm="handlePay"></Bottom>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Bottom from '@/components/Bottom.vue'
	import { userActivityDisplay } from '@/network/demand.js'
	import { generateOrderSn, createOrder } from '@/network/api.js'
	export default {
		components: {
			Navbar,
			Bottom
		},
		data() {
			return {
				ticketData: {},
				ticketInfo: {},
				param: {}
			}
		},
		onLoad(options) {
			this.param = getApp().globalData.activityForm
			this.ticketData = JSON.parse(options.params)
			this.handleGetDisplay()
		},
		methods: {
			handleGetDisplay() {
				const params = {
					activity_id: this.ticketData.activity_id,
					ticket_id: this.ticketData.ticket_id
				}
				userActivityDisplay(params).then(res => {
					this.ticketInfo = res.data.ticket
				})
			},
			async handlePay(){
				const orderSnRes = await generateOrderSn()
				
				const params = {
					id: this.ticketData.activity_id,
					ticket_id: this.ticketData.ticket_id,
					type: "activity",
					order_sn: orderSnRes.data.order_sn,
					userid: uni.getStorageSync("user_id"),
					params: this.param,
					reference_id: this.ticketData.inviterId
				}
				const creRes = await createOrder(params)
				let _this = this
				
				await uni.requestPayment({
					provider: "wxpay",
					appId: creRes.data.order_str.appId,
					timeStamp: creRes.data.order_str.timeStamp,
					nonceStr: creRes.data.order_str.nonceStr,
					package: creRes.data.order_str.package,
					signType: creRes.data.order_str.signType,
					paySign: creRes.data.order_str.paySign,
					success() {
						uni.hideLoading()
						uni.redirectTo({
							url: `/pages/activityDetail/activityDetail?id=${_this.ticketData.activity_id}`
						})
					},
					fail(err) {
						uni.hideLoading()
						uni.showLoading({
							title: err,
						})
					},
					complete() {
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style scoped>
	.pay_input {
		padding-top: 24rpx;
	}

	.font_size48 {
		font-size: 48rpx;
	}

	.tag_yellow {
		padding: 4rpx 20rpx 6rpx 20rpx;
		border-radius: 10px 10px 10px 0px;
		background-color: #FFAA02FF;
		color: #fff;
	}
</style>